<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="储液罐名称" prop="jarName">
                <a-input v-model="form.jarName" :maxLength="8" placeholder="请输入储液罐名称" />
            </a-form-model-item>
            <a-form-model-item label="储液罐编码" prop="jarCode">
                <a-input v-model="form.jarCode" :disabled="form.jarId?true:false" :maxLength="20" placeholder="请输入储液罐编码" />
            </a-form-model-item>
            <a-form-model-item label="所属产线" prop="lineCode">
                <a-select v-model="form.lineCode" showSearch optionFilterProp="name" placeholder="请选择所属产线">
                    <a-select-option :value="item.lineCode" :name="item.lineName+item.lineCode" v-for="item in lines" :key="item.lineCode">{{item.lineName}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="关联设备" prop="deviceCode">
                <a-select v-model="form.deviceCode" showSearch optionFilterProp="name" placeholder="请选择关联设备">
                    <a-select-option :value="item.deviceCode" :name="item.deviceName+item.deviceCode" v-for="item in devices" :key="item.deviceCode">{{item.deviceName}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="储液罐总容量" prop="jarVolume">
                <a-input placeholder="请输入储液罐储液罐总容量" addon-after="L" v-model="form.jarVolume" />
            </a-form-model-item>
            <a-form-model-item label="储液罐高度" prop="jarHeight">
                <a-input placeholder="请输入储液罐高度" addon-after="CM" v-model="form.jarHeight" />
            </a-form-model-item>
            <a-form-model-item label="储液罐直径" prop="jarDiameter">
                <a-input placeholder="请输入储液罐直径" addon-after="CM" v-model="form.jarDiameter" />
            </a-form-model-item>
            <!-- <a-form-model-item label="储液罐负责人" prop="jarLeader">
                <a-input placeholder="请输入负责人" disabled v-model="form.jarLeader" />
            </a-form-model-item> -->
            <a-form-model-item label="储液罐换算比例" prop="jarProportion">
                <a-input placeholder="请输入储液罐换算比例" addon-after="L / CM" v-model="form.jarProportion" />
            </a-form-model-item>
            <a-form-model-item label="储液罐位置" prop="jarLocation">
                <a-input placeholder="请输入储液罐位置" v-model="form.jarLocation" />
            </a-form-model-item>
            <!-- 说明文字 -->
            <a-form-model-item label="储液罐变化阈值" prop="jarThreshold">
                <a-input placeholder="请输入储液罐变化阈值" addon-after="CM" v-model="form.jarThreshold" />
                <p class="tip">单位时间(1小时)内液位异常变化（加液/抽液）的阈值</p>
            </a-form-model-item>
            <a-form-model-item label="备注" prop="comments">
                <a-textarea placeholder="请输入备注" :maxlength="50" v-model="form.comments" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import { addInfo, updateInfo } from '@/api/device/liquid';

export default {
    name: 'TankInfo',
    props: {
        info: {
            type: Object,
            default: () => {}
        },
        lines:{
            type:Array,
            default:()=>[]
        },
        devices:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            loading: false,
            title: '储液罐信息',
            rules,
            form: {
                jarName: '',
                jarCode: '',
                lineCode: undefined,
                deviceCode: undefined,
                jarVolume:5000,
                jarHeight:3000,
                jarDiameter:1500,
                // jarLeader:'',
                jarProportion:'',
                jarLocation:'',
                jarThreshold:'',
                comments:''
            },
            layout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 }
            }
        };
    },
    created() {
        this.form = { ...this.form, ...this.info };
    },
    methods: {
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let form= this.form;
                        // let {lineCode} = form;
                        // let lineItem  = this.lines.find(item=>item.lineCode==lineCode);
                        // console.log(lineItem)
                        let res = null;
                        if (form.jarId) {
                            res = await updateInfo(form);
                        } else {
                            //新增
                            res = await addInfo(form);
                        }
                        if (res.code == 200) {
                            this.$message.success('操作成功!');
                            this.$emit('submit');
                        } else {
                            this.$message.error(res.message);
                        }
                    } finally {
                        this.loading = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped>
.tip{
    margin: 0;
    font-size: 12px;
    color: #ff4d4f;
    line-height: 20px;
}
</style>
